<template>
  <cu-layout :navProp="{ placeholder: true }" :bgStyle="{ bgColor: 'rgb(255,255,0)' }">
    <view :class="[`${prefixCls}-company-verification-auth-container`]">
      <view class="header">
        <view>
          <view class="header__dot">1</view>
          <text class="header__text">提交申请</text>
        </view>
        <i class="header__line"></i>
        <view>
          <view class="header__dot">2</view>
          <text class="header__text">身份审核</text>
        </view>
        <i class="header__line"></i>
        <view>
          <view class="header__dot">3</view>
          <text class="header__text">短信通知</text>
        </view>
      </view>

      <view class="content">
        <view class="selected-interests">
          <view class="interests-tite">
            <image :src="$CDN('/customer/static/images/company-verification/right-left.png')" alt="" />
            <view class="name">精选权益</view>
            <image :src="$CDN('/customer/static/images/company-verification/right-right.png')" alt="" />
          </view>
          <view class="rights-content">
            <view class="item-rights" v-for="item in bannerList" :key="item.title">
              <image :src="item.icon" alt="" />
              <view>{{ item.title }}</view>
              <view>{{ item.desc }}</view>
            </view>
          </view>
          <view class="rights-info">
            <view>认证成功后签约，即享租金优惠</view>
            <view>企业员工入住越多,租金折扣越大</view>
          </view>
        </view>
        <view class="gray-line"></view>
        <view class="form-content">
          <view class="content__title content__title--first">申请信息</view>
          <view>
            <uv-input border="bottom" placeholder="请输入姓名" inputAlign="right" disabledColor="white" color="#333333" v-model="sendData.name">
              <template v-slot:prefix>
                <uv-text text="姓名" size="13" margin="10rpx 0"></uv-text>
              </template>
            </uv-input>
          </view>
          <view @click="handleChangedocumentType">
            <uv-input border="bottom" placeholder="请选择证件类型" inputAlign="right" disabled disabledColor="white" color="#333333" v-model="sendData.card_type">
              <template v-slot:prefix>
                <uv-text text="证件类型" size="13" margin="10rpx 0"></uv-text>
              </template>
              <template v-slot:suffix>
                <uv-icon name="arrow-right"></uv-icon>
              </template>
            </uv-input>
          </view>
          <view v-if="cardChoose">
            <uv-input border="bottom" placeholder="请输入证件号" inputAlign="right" disabledColor="white" color="#333333" v-model="sendData.card_num">
              <template v-slot:prefix>
                <uv-text text="证件号" size="13" margin="10rpx 0"></uv-text>
              </template>
            </uv-input>
          </view>
          <view @click="gotoSearch">
            <uv-input border="bottom" placeholder="请选择所在公司" inputAlign="right" disabled disabledColor="white" color="#333333" v-model="sendData.company_name">
              <template v-slot:prefix>
                <uv-text text="所在公司" size="13" margin="10rpx 0"></uv-text>
              </template>
              <template v-slot:suffix>
                <uv-icon name="arrow-right"></uv-icon>
              </template>
            </uv-input>
          </view>
          <view v-if="codeChoose" @click="handleChangeVerification_way">
            <uv-input border="bottom" placeholder="请选择认证方式" inputAlign="right" disabled disabledColor="white" color="#333333" v-model="sendData.verification_way_name">
              <template v-slot:prefix>
                <uv-text text="认证方式" size="13" margin="10rpx 0"></uv-text>
              </template>
              <template v-slot:suffix>
                <uv-icon name="arrow-right"></uv-icon>
              </template>
            </uv-input>
          </view>
          <view>
            <view class="content__title content__title--second">相关证明</view>
            <view class="content__tips content__tips--first">请拍摄或上传相关证明照片(最多5张)</view>
            <cu-uploader v-model="sendData.images" :limit="5"></cu-uploader>
            <view class="content__tips content__tips--second">
              <view>小提示：</view>
              <view>1、 请上传您的有效证明，并且选择正确的证明类型</view>
              <view>2、 请您在签约时确认是否完成审核，如未通过，可联系门店人员进行审核</view>
            </view>
          </view>
        </view>
      </view>
      <cu-footer-operate>
        <uv-button type="primary" size="large" :disabled="!isShowSubmit" @click="submit" text="提交申请"></uv-button>
      </cu-footer-operate>
      <!-- 证件类型弹窗 -->
      <uv-picker ref="documentTypePickerRef" :columns="documentTypeColumns" @confirm="documentTypeConfirm"></uv-picker>
      <!-- 认证方式弹窗 -->
      <uv-picker ref="verificationWayPickerRef" :columns="verificationWayColumns" keyName="label" @confirm="verificationWayConfirm"></uv-picker>
    </view>
  </cu-layout>
</template>

<script>
import { getStorageCache, removeStorageCache } from '@/common/cache'
import { mapState, mapGetters } from 'vuex'
import { documentTypeColumns, verificationWayColumns } from '@/common/enums/signingReservationEnum'
import { companyVerification, customerVerificationIsOpen, companyVerInfo } from './api'
import { setStorageCache } from '@/common/cache'
const bannerList = [
  {
    icon: CDN('/customer/static/images/company-verification/icon-rental.png'),
    title: '租金优惠',
  },
  {
    icon: CDN('/customer/static/images/company-verification/icon-dock.png'),
    title: '专人对接',
  },
  {
    icon: CDN('/customer/static/images/company-verification/icon-customized.png'),
    title: '服务定制',
  },
  {
    icon: CDN('/customer/static/images/company-verification/icon-care.png'),
    title: '员工关怀',
    desc: '专属社群活动',
  },
]
export default {
  name: 'authPage',

  data() {
    return {
      bannerList,
      company: {},
      verificationWayColumns,
      documentTypeColumns,
      sendData: {
        card_type: '',
        city_id: '',
        card_num: '',
        credit_code: '',
        company_name: '',
        verification_way: '',
        images: [],
      },
      company_v_status: 0, //0启用 1关闭
      verification_company_info: {},
      reVerify: false, //true 重新认证
    }
  },
  onLoad(options) {
    this.reVerify = options.reVerify
  },
  onShow() {
    if (getStorageCache('certificationCompanyInfo')) {
      this.company = getStorageCache('certificationCompanyInfo')
      removeStorageCache('certificationCompanyInfo')
    }
    this.initData()
  },
  watch: {},
  methods: {
    async customerVerificationIsOpen() {
      const res = await customerVerificationIsOpen()
      if (res.errcode == 0) {
        this.company_v_status = res.data.status
        if (this.company_v_status == 1) {
          uni.$uv.toast('功能暂未开放，敬请期待!')
        } else {
          if (this.reVerify) return
          this.companyVerInfo()
        }
      }
    },
    async companyVerInfo() {
      const res = await companyVerInfo()
      if (res.errcode == 0) {
        this.verification_company_info = res.data
        if (this.verification_company_info.status != '认证中') {
          uni.showModal({
            title: '提示',
            content: `您已提交认证申请，请前往查看我的认证信息页面`,
            confirmText: '确定',
            showCancel: false,
            success: (res) => {
              if (res.confirm) {
                this.$ROUTE.go(`/pages/subpackage/company-customer-verification/info`, { params: encodeURIComponent(JSON.stringify(this.verification_company_info)) })
              }
            },
          })
        }
      }
    },
    initData() {
      this.customerVerificationIsOpen()
      this.sendData = {
        ...this.sendData,
        city_id: this.cityConfig.cityId,
      }
      this.sendData.credit_code = this.company.credit_code
      this.sendData.company_name = this.company.company_name
    },
    documentTypeConfirm(e) {
      this.sendData.card_type = e.value[0]
    },
    verificationWayConfirm(e) {
      this.sendData.verification_way = e.value[0].value
      this.sendData.verification_way_name = e.value[0].label
    },
    gotoSearch() {
      this.$ROUTE.go('/pages/subpackage/company-customer-verification/search')
    },
    handleChangedocumentType() {
      this.$refs['documentTypePickerRef'].open()
    },
    handleChangeVerification_way() {
      this.$refs['verificationWayPickerRef'].open()
    },
    async submit() {
      if (!this.checkValid()) {
        return
      }
      const { errcode, errmsg } = await companyVerification(this.resetSendData())
      if (errcode === 0) {
        this.$ROUTE.go('/pages/subpackage/company-customer-verification/info')
      }
    },
    resetSendData() {
      let images = this.sendData.images.map((item) => {
        return item.url
      })
      let data = {
        ...this.sendData,
        images,
      }
      return data
    },
    checkValid() {
      const nameRegex = /^[\u4e00-\u9fa5]+$/
      if (!nameRegex.test(this.sendData.name)) {
        uni.$uv.toast('请输入正确的姓名!')
        return false
      }

      if (!this.sendData.card_type) {
        uni.$uv.toast('请选择证件类型')
        return false
      }

      if (!this.sendData.card_num) {
        uni.$uv.toast('请输入正确的证件号')
        return false
      }

      if (!this.sendData.credit_code) {
        uni.$uv.toast('请选择您所在的公司')
        return false
      }

      if (!this.sendData.verification_way) {
        uni.$uv.toast('请选择认证方式')
        return false
      }

      if (!this.sendData.images.length) {
        uni.$uv.toast('请至少上传一张相关证明照片')
        return false
      }

      return true
    },
    // ...mapMutations({}),
  },
  computed: {
    isShowSubmit() {
      return (
        this.company_v_status == 0 &&
        (this.sendData.card_type || this.sendData.card_num || this.sendData.credit_code || this.sendData.verification_way || this.sendData.images.length > 0)
      )
    },
    cardChoose() {
      return !!this.sendData.card_type
    },
    wayChoose() {
      return !!this.sendData.verification_way
    },
    codeChoose() {
      return !!this.sendData.credit_code
    },
    ...mapGetters(['cityConfig']),
  },
  components: {},
}
</script>

<style lang="scss" scoped>
page {
  background: white !important;
}
.#{prefixCls('company-verification-auth-container')} {
  padding-bottom: 200rpx;
}
.header {
  width: 100%;
  height: 240rpx;
  padding: 40rpx 40rpx 0;
  display: flex;
  justify-content: space-around;
  background: #{cdn('/customer/static/images/company-verification/bg-message.png')} no-repeat center / cover;
  box-sizing: border-box;
  color: #ffffff;
}
.header__dot {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: #ffffff;
  margin: 0 auto 20rpx;
  font-size: 32rpx;
  font-weight: bold;
  color: #242424;
  line-height: 56rpx;
  text-align: center;
}
.header__text {
  line-height: 40rpx;
  font-size: 28rpx;
}
.header__line {
  width: 90rpx;
  height: 4rpx;
  background: #ffffff;
  border-radius: 6rpx;
  margin: 24rpx 24rpx 0;
}
.content {
  margin-top: -44rpx;
  padding: 40rpx 0 0;
  background: #ffffff;
  border-radius: 40rpx 40rpx 0 0;
  color: #333333;
}
.selected-interests {
  padding: 0 40rpx 40rpx;
  .interests-tite {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    image {
      height: 8rpx;
      width: 30%;
    }
    .name {
      margin: 0 10rpx;
      font-size: 32rpx;
      font-weight: bold;
      color: #222222;
      line-height: 32rpx;
    }
  }
  .rights-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    margin: 52rpx 0 0;
    .item-rights {
      min-width: 140rpx;
      max-width: 180rpx;
      margin-bottom: 40rpx;
      font-size: 24rpx;
      font-weight: bold;
      color: #27263a;
      text-align: center;
      image {
        width: 80rpx;
        height: 80rpx;
        margin-bottom: 6rpx;
      }
    }
  }
  .rights-info {
    padding: 20px 20rpx;
    background: #{cdn('/customer/static/images/company-verification/bg-discount.png')} no-repeat center / cover;
    border-radius: 20rpx;
    border: 1rpx solid;
    border-image: linear-gradient(180deg, rgba(255, 235, 208, 1), rgba(255, 225, 194, 1)) 0.03 0.03;
    margin-top: 20rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #ffebd0;
    line-height: 40rpx;
    text-align: center;
  }
}
.gray-line {
  width: 100%;
  height: 32rpx;
  background: #f5f5f5;
}
.form-content {
  margin: 30rpx;
}
.content__title {
  font-size: 30rpx;
  font-weight: bold;
  line-height: 30rpx;
}
.content__title--first {
  margin-bottom: 20rpx;
}
.content__tips {
  font-size: 24rpx;
  line-height: 32rpx;
  color: #999999;
}
.content__tips--first {
  margin: 12rpx 0 20rpx 0;
}
.content__tips--second {
  margin-top: 24rpx;
}
.content__title--second {
  margin-top: 30rpx;
}
.footer {
  position: fixed;
  bottom: 0;
  height: 120rpx;
  box-shadow: 0 0 42rpx 0 rgba(0, 0, 0, 0.1);
  border-radius: 16rpx 16rpx 0 0;
  text-align: center;
  background: #ffffff;
}
.button {
  line-height: 84rpx;
  background: $uv-primary;
  border-radius: 16rpx;
  color: #ffffff;
  font-size: 32rpx;
  font-weight: bold;
}
.mail-select option {
  direction: ltr;
}
.disabledBtn {
  opacity: 0.5;
}
</style>
